<template>
  <view class="alerts-container">
    <!-- 顶部统计 -->
    <view class="stats-section">
      <view class="stats-header">
        <text class="stats-title">预警中心</text>
        <view class="stats-actions">
          <view class="action-btn" @click="showFilter">
            <text class="iconfont icon-filter"></text>
          </view>
          <view class="action-btn" @click="showSettings">
            <text class="iconfont icon-cog"></text>
          </view>
        </view>
      </view>
      
      <!-- 预警统计 -->
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ alertStats.total }}</text>
          <text class="stat-label">总预警</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ alertStats.urgent }}</text>
          <text class="stat-label">紧急</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ alertStats.pending }}</text>
          <text class="stat-label">待处理</text>
        </view>
      </view>
    </view>

    <!-- 预警筛选 -->
    <view class="filter-section">
      <scroll-view class="filter-scroll" scroll-x="true">
        <view class="filter-tabs">
          <view 
            class="filter-tab" 
            :class="{ active: activeFilter === item.value }"
            v-for="item in filterOptions" 
            :key="item.value"
            @click="selectFilter(item.value)"
          >
            <text class="filter-text">{{ item.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 预警列表 -->
    <view class="alerts-list">
      <view 
        class="alert-card" 
        v-for="(alert, index) in filteredAlerts" 
        :key="alert.id"
        :class="alert.type"
      >
        <view class="alert-header">
          <view class="alert-info">
            <view class="alert-icon" :class="alert.iconClass">
              <text class="iconfont" :class="alert.icon"></text>
            </view>
            <view class="alert-details">
              <text class="alert-title">{{ alert.title }}</text>
              <text class="alert-desc">{{ alert.description }}</text>
            </view>
          </view>
          <view class="alert-status">
            <text class="status-badge" :class="alert.priorityClass">{{ alert.priority }}</text>
          </view>
        </view>
        
        <view class="alert-stats">
          <view class="stat-item" v-for="(stat, statIndex) in alert.stats" :key="statIndex">
            <text class="stat-label">{{ stat.label }}</text>
            <text class="stat-value" :class="stat.valueClass">{{ stat.value }}</text>
          </view>
        </view>
        
        <view class="alert-footer">
          <text class="create-time">创建时间：{{ alert.createTime }}</text>
          <view class="action-buttons">
            <button class="action-btn detail-btn" @click="viewDetail(alert.id)">查看详情</button>
            <button class="action-btn primary-btn" @click="handleAlert(alert.id)">{{ alert.actionText }}</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 预警设置 -->
    <view class="settings-section">
      <view class="section-header">
        <text class="section-title">预警设置</text>
        <text class="section-link" @click="editSettings">编辑</text>
      </view>
      <view class="settings-list">
        <view 
          class="setting-item" 
          v-for="(setting, index) in alertSettings" 
          :key="index"
        >
          <view class="setting-info">
            <text class="iconfont setting-icon" :class="setting.icon"></text>
            <text class="setting-name">{{ setting.name }}</text>
          </view>
          <view class="setting-control">
            <text class="setting-value">{{ setting.value }}</text>
            <view class="toggle-switch" :class="{ active: setting.enabled }" @click="toggleSetting(index)">
              <view class="toggle-slider"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="action-section">
      <view class="action-grid">
        <button class="action-btn add-btn" @click="addAlert">
          <text class="iconfont icon-plus"></text>
          <text class="btn-text">新增预警</text>
        </button>
        <button class="action-btn export-btn" @click="exportReport">
          <text class="iconfont icon-download"></text>
          <text class="btn-text">导出报告</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 响应式数据
const activeFilter = ref('all')

const alertStats = reactive({
  total: 8,
  urgent: 3,
  pending: 5
})

const filterOptions = ref([
  { label: '全部', value: 'all' },
  { label: '紧急', value: 'urgent' },
  { label: '重要', value: 'important' },
  { label: '一般', value: 'normal' },
  { label: '已处理', value: 'handled' }
])

const alerts = ref([
  {
    id: 1,
    title: '检测超时预警',
    description: '3辆车检测超过24小时',
    type: 'urgent',
    priority: '紧急',
    priorityClass: 'urgent-priority',
    icon: 'icon-exclamation',
    iconClass: 'urgent-icon',
    actionText: '立即处理',
    createTime: '2小时前',
    stats: [
      { label: '影响车辆', value: '3辆' },
      { label: '超时时长', value: '26小时', valueClass: 'urgent-value' }
    ]
  },
  {
    id: 2,
    title: '过户延期预警',
    description: '5辆车过户资料不齐',
    type: 'warning',
    priority: '重要',
    priorityClass: 'warning-priority',
    icon: 'icon-clock',
    iconClass: 'warning-icon',
    actionText: '补充资料',
    createTime: '4小时前',
    stats: [
      { label: '影响车辆', value: '5辆' },
      { label: '缺失资料', value: '12项', valueClass: 'warning-value' }
    ]
  },
  {
    id: 3,
    title: '物流延迟预警',
    description: '2辆车物流信息异常',
    type: 'info',
    priority: '一般',
    priorityClass: 'info-priority',
    icon: 'icon-ship',
    iconClass: 'info-icon',
    actionText: '联系物流',
    createTime: '6小时前',
    stats: [
      { label: '影响车辆', value: '2辆' },
      { label: '延迟时长', value: '6小时', valueClass: 'info-value' }
    ]
  },
  {
    id: 4,
    title: '检测完成通知',
    description: 'Audi A6检测已完成',
    type: 'success',
    priority: '已处理',
    priorityClass: 'success-priority',
    icon: 'icon-check',
    iconClass: 'success-icon',
    actionText: '查看详情',
    createTime: '1小时前',
    stats: [
      { label: '处理车辆', value: '1辆' },
      { label: '检测等级', value: 'S级', valueClass: 'success-value' }
    ]
  },
  {
    id: 5,
    title: '资料过期预警',
    description: '3份资料即将过期',
    type: 'info',
    priority: '提醒',
    priorityClass: 'info-priority',
    icon: 'icon-file',
    iconClass: 'info-icon',
    actionText: '更新资料',
    createTime: '8小时前',
    stats: [
      { label: '过期资料', value: '3份' },
      { label: '剩余时间', value: '2天', valueClass: 'info-value' }
    ]
  }
])

const alertSettings = ref([
  {
    name: '检测超时预警',
    value: '24小时',
    enabled: true,
    icon: 'icon-bell'
  },
  {
    name: '过户延期预警',
    value: '48小时',
    enabled: true,
    icon: 'icon-clock'
  },
  {
    name: '物流延迟预警',
    value: '12小时',
    enabled: false,
    icon: 'icon-ship'
  }
])

// 计算属性
const filteredAlerts = computed(() => {
  if (activeFilter.value === 'all') {
    return alerts.value
  }
  
  const typeMap = {
    urgent: 'urgent',
    important: 'warning',
    normal: 'info',
    handled: 'success'
  }
  
  return alerts.value.filter(alert => alert.type === typeMap[activeFilter.value])
})

// 方法
const selectFilter = (filter) => {
  activeFilter.value = filter
}

const showFilter = () => {
  uni.showToast({
    title: '筛选功能开发中',
    icon: 'none'
  })
}

const showSettings = () => {
  uni.navigateTo({
    url: '/pages/settings/settings'
  })
}

const viewDetail = (id) => {
  uni.navigateTo({
    url: `/pages/alert-detail/alert-detail?id=${id}`
  })
}

const handleAlert = (id) => {
  uni.showToast({
    title: '处理功能开发中',
    icon: 'none'
  })
}

const editSettings = () => {
  uni.navigateTo({
    url: '/pages/alert-settings/alert-settings'
  })
}

const toggleSetting = (index) => {
  alertSettings.value[index].enabled = !alertSettings.value[index].enabled
}

const addAlert = () => {
  uni.showToast({
    title: '新增预警功能开发中',
    icon: 'none'
  })
}

const exportReport = () => {
  uni.showToast({
    title: '报告导出中...',
    icon: 'loading'
  })
  setTimeout(() => {
    uni.showToast({
      title: '报告已导出',
      icon: 'success'
    })
  }, 2000)
}

// 生命周期
onMounted(() => {
  loadAlerts()
})

const loadAlerts = () => {
  // 这里可以调用API获取预警数据
  console.log('加载预警数据')
}
</script>

<style scoped>
.alerts-container {
  background-color: #f8fafc;
  min-height: 100vh;
}

.stats-section {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 24px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.stats-title {
  font-size: 20px;
  font-weight: bold;
}

.stats-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.filter-section {
  background: white;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-scroll {
  white-space: nowrap;
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.filter-tab {
  padding: 8px 16px;
  background: #f3f4f6;
  border-radius: 20px;
  white-space: nowrap;
}

.filter-tab.active {
  background: #ef4444;
  color: white;
}

.filter-text {
  font-size: 14px;
}

.alerts-list {
  padding: 16px;
}

.alert-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.alert-card.urgent {
  border-left: 4px solid #ef4444;
}

.alert-card.warning {
  border-left: 4px solid #f59e0b;
}

.alert-card.info {
  border-left: 4px solid #0ea5e9;
}

.alert-card.success {
  border-left: 4px solid #10b981;
  opacity: 0.75;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.alert-info {
  display: flex;
  align-items: center;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.urgent-icon {
  background: #fee2e2;
  color: #ef4444;
}

.warning-icon {
  background: #fef3c7;
  color: #f59e0b;
}

.info-icon {
  background: #e0f2fe;
  color: #0ea5e9;
}

.success-icon {
  background: #dcfce7;
  color: #10b981;
}

.alert-details {
  flex: 1;
}

.alert-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-bottom: 4px;
}

.alert-desc {
  font-size: 14px;
  color: #6b7280;
  display: block;
}

.alert-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.urgent-priority {
  background: #fee2e2;
  color: #ef4444;
}

.warning-priority {
  background: #fef3c7;
  color: #f59e0b;
}

.info-priority {
  background: #e0f2fe;
  color: #0ea5e9;
}

.success-priority {
  background: #dcfce7;
  color: #10b981;
}

.alert-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.urgent-value {
  color: #ef4444;
}

.warning-value {
  color: #f59e0b;
}

.info-value {
  color: #0ea5e9;
}

.success-value {
  color: #10b981;
}

.alert-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-time {
  font-size: 12px;
  color: #6b7280;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
}

.detail-btn {
  background: #f3f4f6;
  color: #6b7280;
}

.primary-btn {
  background: #ef4444;
  color: white;
}

.settings-section {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.section-link {
  font-size: 14px;
  color: #3b82f6;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.setting-info {
  display: flex;
  align-items: center;
}

.setting-icon {
  color: #3b82f6;
  margin-right: 12px;
}

.setting-name {
  font-size: 14px;
  color: #1f2937;
}

.setting-control {
  display: flex;
  align-items: center;
}

.setting-value {
  font-size: 12px;
  color: #6b7280;
  margin-right: 12px;
}

.toggle-switch {
  width: 40px;
  height: 24px;
  background: #d1d5db;
  border-radius: 12px;
  position: relative;
  transition: background-color 0.3s;
}

.toggle-switch.active {
  background: #3b82f6;
}

.toggle-slider {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: transform 0.3s;
}

.toggle-switch.active .toggle-slider {
  transform: translateX(16px);
}

.action-section {
  padding: 16px;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  border: none;
  gap: 8px;
}

.add-btn {
  background: #3b82f6;
  color: white;
}

.export-btn {
  background: #10b981;
  color: white;
}

.btn-text {
  font-size: 14px;
  font-weight: 500;
}
</style> 